<template>
  <div>
    <el-card :body-style="{ padding: '15px', position: 'relative' }">
      <el-tabs v-model="editableTabsValue" type="border-card" class="demo-tabs">
        <el-tab-pane
          v-for="item in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          <mission-details />
        </el-tab-pane>
      </el-tabs>
      <div style="position: absolute; top: 19px; right: 30px; z-index: 10">
        <el-button type="primary" @click="addTab">新建任务</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import missionDetails from "./components/missionDetails.vue";
const editableTabsValue = ref("1");
let tabIndex = 2;
const editableTabs = ref([
  {
    title: "任务1",
    name: "1",
    content: "Tab 1 content"
  },
  {
    title: "任务2",
    name: "2",
    content: "Tab 2 content"
  }
]);
const addTab = () => {
  const newTabName = `${++tabIndex}`;
  editableTabs.value.push({
    title: "New Tab",
    name: newTabName,
    content: "New Tab content"
  });
  editableTabsValue.value = newTabName;
};
</script>
<style scoped lang="scss">
::v-deep .el-tabs--border-card > .el-tabs__header {
  padding-right: 102px;
}
</style>
